<template>
    <van-skeleton title :row="3" />
    <van-search v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词" />
    <div class="left">
        <van-sidebar v-model="active">
            <van-sidebar-item v-for="(item, index) in categorieslist" :title="item.cat_name" />
        </van-sidebar>
    </div>
    <div class="right">
        <div v-for="(item, index) in categorieslist[active]?.children">
            <div class="righta">
                <dl v-for="(i, index) in item.children">
                    <dt>
                        <img :src="i.cat_icon" alt="" @click="xq(i.cat_id)">
                    </dt>
                    <dd>
                        {{ i.cat_name }}
                    </dd>
                </dl>
            </div>
        </div>
    </div>
 
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
let router = new useRouter()
const categorieslist = ref([])
axios.get('https://api-hmugo-web.itheima.net/api/public/v1/categories').then(res => {
    categorieslist.value = res.data.message
})
const active = ref(0);
const xq = (cid) => {
    router.push({
        path: '/xq',
        query: {
            cid
        }
    })
}

</script>

<style lang="scss" scoped>
.left {
    float: left;
}

.right {
    display: flex;
    flex-wrap: wrap;
   
}

.righta {
    width: 100px;
    height: 100px;
    margin-left: 15px;
    
}
</style>